<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
    <script src="rgraph/RGraph.common.core.js" ></script>
    <script src="rgraph/RGraph.common.effects.js" ></script>
    <script src="rgraph/RGraph.common.dynamic.js" ></script>
    <script src="rgraph/RGraph.gauge.js" ></script>
    <script src="rgraph/excanvas.js"></script>
    <script>
	    //window.onload = function () {			
            var gauge1 = new RGraph.Gauge('cvs1', 0, 2000, 890);
            gauge1.Set('chart.scale.decimals', 0);
            gauge1.Set('chart.tickmarks.small', 50);
            gauge1.Set('chart.tickmarks.big',5);
            gauge1.Set('chart.title.top', '');
            gauge1.Set('chart.title.top.size', 24);
            gauge1.Set('chart.title.bottom', '原水电导率');
			gauge1.Set('chart.colors.ranges', [[1200, 1600, 'yellow'],[1600, 2000, 'red']]);
            gauge1.Set('chart.adjustable', true);
            gauge1.Draw();  
		    function Updategauge1 () {
				gauge1.value=RGraph.random(800,900);
				RGraph.Effects.Gauge.Grow(gauge1);
				setTimeout(Updategauge1, 2000);
			}
			Updategauge1();
			
			var gauge2 = new RGraph.Gauge('cvs2', 0.0, 100, 65);
            gauge2.Set('chart.scale.decimals', 0);
            gauge2.Set('chart.tickmarks.small', 50);
            gauge2.Set('chart.tickmarks.big',5);
            gauge2.Set('chart.title.top', '');
            gauge2.Set('chart.title.top.size', 24);
            gauge2.Set('chart.title.bottom', '原水瞬时流量');
			gauge2.Set('chart.colors.ranges', [[90, 95, 'yellow'],[95, 100, 'red']]);
            gauge2.Set('chart.adjustable', true);
            gauge2.Draw();  
		    function Updategauge2 () {
				gauge2.value=RGraph.random(60,80);
				RGraph.Effects.Gauge.Grow(gauge2);
				setTimeout(Updategauge2, 2000);
			}
			Updategauge2();
			
            var gauge3 = new RGraph.Gauge('cvs3', 0.0, 10000, 4500);
            gauge3.Set('chart.scale.decimals', 0);
            gauge3.Set('chart.tickmarks.small', 50);
            gauge3.Set('chart.tickmarks.big',5);
            gauge3.Set('chart.title.top', '');
            gauge3.Set('chart.title.top.size', 24);
            gauge3.Set('chart.title.bottom', '原水总流量');
			gauge3.Set('chart.colors.ranges', [[8000, 9000, 'yellow'],[9000, 10000, 'red']]);
            gauge3.Set('chart.adjustable', true);
            gauge3.Draw();  
		    function Updategauge3 () {
				gauge3.value=RGraph.random(3000,5000);
				RGraph.Effects.Gauge.Grow(gauge3);
				setTimeout(Updategauge3, 2000);
			}
			Updategauge3();
			
			var gauge4 = new RGraph.Gauge('cvs4', 0.0, 10, 8.5);
            gauge4.Set('chart.scale.decimals', 0);
            gauge4.Set('chart.tickmarks.small', 50);
            gauge4.Set('chart.tickmarks.big',5);
            gauge4.Set('chart.title.top', '');
            gauge4.Set('chart.title.top.size', 24);
            gauge4.Set('chart.title.bottom', '原水压力');
			gauge4.Set('chart.colors.ranges', [[8, 9, 'yellow'],[9, 10, 'red']]);
            gauge4.Set('chart.adjustable', true);
            gauge4.Draw();   
		    function Updategauge4 () {
				gauge4.value=RGraph.random(6,9);
				RGraph.Effects.Gauge.Grow(gauge4);
				setTimeout(Updategauge4, 2000);
			}
			Updategauge4();
			
			var gauge5 = new RGraph.Gauge('cvs5', 0, 300, 75);
            gauge5.Set('chart.scale.decimals', 0);
            gauge5.Set('chart.tickmarks.small', 50);
            gauge5.Set('chart.tickmarks.big',5);
            gauge5.Set('chart.title.top', '');
            gauge5.Set('chart.title.top.size', 24);
            gauge5.Set('chart.title.bottom', '直饮水电导率');
			gauge5.Set('chart.colors.ranges', [[200, 250, 'yellow'],[250, 300, 'red']]);
            gauge5.Set('chart.adjustable', true);
            gauge5.Draw();  
		    function Updategauge5 () {
				gauge5.value=RGraph.random(50,80);
				RGraph.Effects.Gauge.Grow(gauge5);
				setTimeout(Updategauge5, 2000);
			}
			Updategauge5();
			
			var gauge6 = new RGraph.Gauge('cvs6', 0.0, 100, 55);
            gauge6.Set('chart.scale.decimals', 0);
            gauge6.Set('chart.tickmarks.small', 50);
            gauge6.Set('chart.tickmarks.big',5);
            gauge6.Set('chart.title.top', '');
            gauge6.Set('chart.title.top.size', 24);
            gauge6.Set('chart.title.bottom', '直饮水瞬时流量');
			gauge6.Set('chart.colors.ranges', [[90, 95, 'yellow'],[95, 100, 'red']]);
            gauge6.Set('chart.adjustable', true);
            gauge6.Draw();  
		    function Updategauge6 () {
				gauge6.value=RGraph.random(50,70);
				RGraph.Effects.Gauge.Grow(gauge6);
				setTimeout(Updategauge6, 2000);
			}
			Updategauge6();
			
            var gauge7 = new RGraph.Gauge('cvs7', 0.0, 10000, 4500);
            gauge7.Set('chart.scale.decimals', 0);
            gauge7.Set('chart.tickmarks.small', 50);
            gauge7.Set('chart.tickmarks.big',5);
            gauge7.Set('chart.title.top', '');
            gauge7.Set('chart.title.top.size', 24);
            gauge7.Set('chart.title.bottom', '直饮水总流量');
			gauge7.Set('chart.colors.ranges', [[8000, 9000, 'yellow'],[9000, 10000, 'red']]);
            gauge7.Set('chart.adjustable', true);
            gauge7.Draw();  
		    function Updategauge7 () {
				gauge7.value=RGraph.random(3000,5000);
				RGraph.Effects.Gauge.Grow(gauge7);
				setTimeout(Updategauge7, 2000);
			}
			Updategauge7();
			
			var gauge8 = new RGraph.Gauge('cvs8', 0.0, 10, 8.5);
            gauge8.Set('chart.scale.decimals', 0);
            gauge8.Set('chart.tickmarks.small', 50);
            gauge8.Set('chart.tickmarks.big',5);
            gauge8.Set('chart.title.top', '');
            gauge8.Set('chart.title.top.size', 24);
            gauge8.Set('chart.title.bottom', '供水压力');
			gauge8.Set('chart.colors.ranges', [[8, 9, 'yellow'],[9, 10, 'red']]);
            gauge8.Set('chart.adjustable', true);
            gauge8.Draw();   
		    function Updategauge8 () {
				gauge8.value=RGraph.random(5,7);
				RGraph.Effects.Gauge.Grow(gauge8);
				setTimeout(Updategauge8, 2000);
			}
			Updategauge8();
        //}        
    </script>
<div id="jbsxBox" class="unitBox" >
<div class="pageContent">
<div style="text-align: center">
        <canvas id="cvs1" width="250" height="250">[No canvas support]</canvas>
        <canvas id="cvs2" width="250" height="250">[No canvas support]</canvas>
        <canvas id="cvs3" width="250" height="250">[No canvas support]</canvas>
		<canvas id="cvs4" width="250" height="250">[No canvas support]</canvas>
        <br>
    </div>
    <div style="text-align: center">
        <canvas id="cvs5" width="250" height="250">[No canvas support]</canvas>
        <canvas id="cvs6" width="250" height="250">[No canvas support]</canvas>
		<canvas id="cvs7" width="250" height="250">[No canvas support]</canvas>
		<canvas id="cvs8" width="250" height="250">[No canvas support]</canvas>
    </div>
  </div> 
</div>  